#less css

[riacte]

🎈 Bogwaters Demo update!! :D

Formatting update, 2 new NPCs, randomisation feature, and quality of life changes

(Previous post)

Bogwaters is a free, text-based, interactive fiction browser game about running an underground shipping Discord server in the 2021 MCYT fandom, hosted on itch.io.

Formatting update:

Added more headers. Also added coloured dividers to section off text:

Home: teal

Tumblr: light blue

Discord: light purplish blue (Discord colour)

Ao3: dark red (Ao3 colour)

Messages: yellow

Check out users/invite: light green

Sleep/new day: gay man flag gradient

Trivia: colours for Tumblr, Messages, and Check out users are eyedropped from the old Tumblr UI

Feedback for these colours are welcome!

2 new NPCs:

Now you won't be locked out of winning the game if someone blocks you! The new NPCs are carbonara-art and hippie-benbog with their own storylines and unlock conditions. 

New features:

Randomised mandatory daily fandom enjoyment decrease ranging from 3 to 7

Chances: -3 (10%), -4 (10%), -5 (60%), -6 (10%), -7 (10%)

When you sleep, there is a randomised potential +1 increase in reblog (20% chance) and post (10%) quota for the following day. Does not carry past that day.

In addition to blogs of the 2 new NPCs, blogs for doehills, ofthebigwaters, and riversymphony are added. These three are not interactable. 

Quality of life changes:

Skippable prologue 

Some scenes that don't have bearing on the gameplay are skippable (for this version, it's the conversation with kindredwaves on June 2)

An individual "check out a user" section now has a link to their respective Tumblr blog and vice versa

Misc:

Minor changes to dash content

Minor changes to text formatting

"Days played" shows up as a stat when you get an ending

"Days left (including today)" shows up in the home menu

Reduced animation 

Reblogs and feedback are appreciated! Thanks for playing! <3

[kokoasci]

im asking here bc i feel like people here maybe have more experience with this. does anyone know where i could set up a personal blog? i considered tumblr but id like this to be more of a personal experiment rather than tied to a social media site. i dont want to have to pay for a custom domain and dont have enough frontend experience to build something from scratch though,, ;__;

no worries if not, just wanted to ask if anyone has done this! <3

[salemruinseverything]

is this it. will this finally be the day i actually get a decent tumblr desktop theme

[counterfeitbloodmoonlit]

so it just...... doesn't go away

[notquiteaghost]

one thing i really appreciate abt AO3 is how once you're using a custom site skin you can just keep adding to it. my site skin now increases font size by 15% AND limits how much space a work's tags can take up AND hides the "you've muted users!" banner. can we go back to having custom css everywhere else

[butter-tartz-writez]

wake up babes, new chapter of What Once Was That One Fic That Was Originally Just A CSS Test But Then I Got Way Too Into It just dropped. and with even MORE positively awful CSS this time !!!!!!!!!!!!

[cpcwiki]

where did you learn css?

Unfortunately, I have not learned CSS 😎👍 it’s one of the things I need to figure out. I believe the wiki’s CSS code was done by the person who designed the wiki. Their username’s Ggeorgelys - they'd be a better person to talk about it than me

[jcmarchi]

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

New Post has been published on https://thedigitalinsider.com/orbital-mechanics-or-how-i-optimized-a-css-keyframes-animation/

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

I recently updated my portfolio at johnrhea.com. (If you’re looking to add a CSS or front-end engineer with storytelling and animation skills to your team, I’m your guy.) I liked the look of a series of planets I’d created for another personal project and decided to reuse them on my new site. Part of that was also reusing an animation I’d built circa 2019, where a moon orbited around the planet.

Initially, I just plopped the animations into the new site, only changing the units (em units to viewport units using some complicated math that I was very, very proud of) so that they would scale properly because I’m… efficient with my time. However, on mobile, the planet would move up a few pixels and down a few pixels as the moons orbited around it. I suspected the plopped-in animation was the culprit (it wasn’t, but at least I got some optimized animation and an article out of the deal).

Here’s the original animation:

My initial animation for the moon ran for 60 seconds. I’m folding it inside a disclosure widget because, at 141 lines, it’s stupid long (and, as we’ll see, emphasis on the stupid). Here it is in all its “glory”:

Open code

#moon1 animation: moon-one 60s infinite; @keyframes moon-one 0% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 5% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 9.9% z-index: 2; 10% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 15% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 19.9% z-index: -1; 20% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 25% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 29.9% z-index: 2; 30% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 35% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 39.9% z-index: -1; 40% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 45% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 49.9% z-index: 2; 50% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 55% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 59.9% z-index: -1; 60% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 65% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 69.9% z-index: 2; 70% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 75% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 79.9% z-index: -1; 80% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 85% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 89.9% z-index: 2; 90% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 95% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 99.9% z-index: -1; 100% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in;

If you look at the keyframes in that code, you’ll notice that the 0% to 20% keyframes are exactly the same as 20% to 40% and so on up through 100%. Why I decided to repeat the keyframes five times infinitely instead of just repeating one set infinitely is a decision lost to antiquity, like six years ago in web time. We can also drop the duration to 12 seconds (one-fifth of sixty) if we were doing our due diligence.

I could thus delete everything from 20% on, instantly dropping the code down to 36 lines. And yes, I realize gains like this are unlikely to be possible on most sites, but this is the first step for optimizing things.

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 5% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 9.9% z-index: 2; 10% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 15% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 19.9% z-index: -1; 20% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in;

Now that we’ve gotten rid of 80% of the overwhelming bits, we can see that there are five main keyframes and two additional ones that set the z-index close to the middle and end of the animation (these prevent the moon from dropping behind the planet or popping out from behind the planet too early). We can change these five points from 0%, 5%, 10%, 15%, and 20% to 0%, 25%, 50%, 75%, and 100% (and since the 0% and the former 20% are the same, we can remove that one, too). Also, since the 10% keyframe above is switching to 50%, the 9.9% keyframe can move to 49.9%, and the 19.9% keyframe can switch to 99.9%, giving us this:

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0%, 100% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 25% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 49.9% z-index: 2; 50% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 75% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 99.9% z-index: -1;

Though I was very proud of myself for my math wrangling, numbers like -3.51217391vw are really, really unnecessary. If a screen was one thousand pixels wide, -3.51217391vw would be 35.1217391 pixels. No one ever needs to go down to the precision of a ten-millionth of a pixel. So, let’s round everything to the tenth place (and if it’s a 0, we’ll just drop it). We can also skip z-index in the 75% and 25% keyframes since it doesn’t change.

Here’s where that gets us in the code:

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0%, 100% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 25% transform: translate(-3.5vw, 3.5vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 49.9% z-index: 2; 50% transform: translate(-5vw, 6.5vw) scale(1); z-index: -1; animation-timing-function: ease-in; 75% transform: translate(1vw, 2.5vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 99.9% z-index: -1;

After all our changes, the animation still looks pretty close to what it was before, only way less code:

One of the things I don’t like about this animation is that the moon kind of turns at its zenith when it crosses the planet. It would be much better if it traveled in a straight line from the upper right to the lower left. However, we also need it to get a little larger, as if the moon is coming closer to us in its orbit. Because both translation and scaling were done in the transform property, I can’t translate and scale the moon independently.

If we skip either one in the transform property, it resets the one we skipped, so I’m forced to guess where the mid-point should be so that I can set the scale I need. One way I’ve solved this in the past is to add a wrapping element, then apply scale to one element and translate to the other. However, now that we have individual scale and translate properties, a better way is to separate them from the transform property and use them as separate properties. Separating out the translation and scaling shouldn’t change anything, unless the original order they were declared on the transform property was different than the order of the singular properties.

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0%, 100% translate: 0 0; scale: 1; z-index: 2; animation-timing-function: ease-in; 25% translate: -3.5vw 3.5vw; z-index: 2; animation-timing-function: ease-out; 49.9% z-index: 2; 50% translate: -5vw 6.5vw; scale: 1; z-index: -1; animation-timing-function: ease-in; 75% translate: 1vw 2.5vw; scale: 0.25; animation-timing-function: ease-out; 99.9% z-index: -1;

Now that we can separate the scale and translate properties and use them independently, we can drop the translate property in the 25% and 75% keyframes because we don’t want them placed precisely in that keyframe. We want the browser’s interpolation to take care of that for us so that it translates smoothly while scaling.

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0%, 100% translate: 0 0; scale: 1; z-index: 2; animation-timing-function: ease-in; 25% scale: 1.5; animation-timing-function: ease-out; 49.9% z-index: 2; 50% translate: -5vw 6.5vw; scale: 1; z-index: -1; animation-timing-function: ease-in; 75% scale: 0.25; animation-timing-function: ease-out; 99.9% z-index: -1;

Lastly, those different timing functions don’t make a lot of sense anymore because we’ve got the browser working for us, and if we use an ease-in-out timing function on everything, then it should do exactly what we want.

#moon1 animation: moon-one 12s infinite ease-in-out; @keyframes moon-one 0%, 100% translate: 0 0; scale: 1; z-index: 2; 25% scale: 1.5; 49.9% z-index: 2; 50% translate: -5vw 6.5vw; scale: 1; z-index: -1; 75% scale: 0.25; 99.9% z-index: -1;

And there you go: 141 lines down to 28, and I think the animation looks even better than before. It will certainly be easier to maintain, that’s for sure.

But what do you think? Was there an optimization step I missed? Let me know in the comments.

[thespacelizard]

i have done 2 of the website things i intended to do today, and like four things i didn't intend to do, but which will make life easier in the long run

i love hand coding things it's like an endless fractal of 'here's another thing you should've done when you started'

[fortunatelycoldengineer]

What is XPath?

[bonestrouslingbones]

so far the html classes have been a mixed bag in that they have almost entirely taught things i already know pretty well by now (today i walked for 20 minutes in >20° weather to learn the wisdom of how to use <p> and <b>) but then i learn something very very basic that i absolutely should have already known that i already immediately edited into ebony's blog because i realized how stupid the original method i was using was (<br> works much better for the sticky notes than copying/pasting an invisible unicode character 10 times until the line breaks by itself)

[dravidious]

You're more amazing than lineart

You're more amazing than tag blocking

[thunderlina]

In the wake of the TikTok ban and revival as a mouthpiece for fascist propaganda, as well as the downfall of Twitter and Facebook/Facebook-owned platforms to the same evils, I think now is a better time than ever to say LEARN HTML!!! FREE YOURSELVES FROM THE SHACKLES OF MAJOR SOCIAL MEDIA PLATFORMS AND EMBRACE THE INDIE WEB!!!

You can host a website on Neocities for free as long as it's under 1GB (which is a LOT more than it sounds like let me tell you) but if that's not enough you can get 50GB of space (and a variety of other perks) for only $5 a month.

And if you can't/don't want to pay for the extra space, sites like File Garden and Catbox let you host files for free that you can easily link into NeoCities pages (I do this to host videos on mine!) (It also lets you share files NeoCities wouldn't let you upload for free anyways, this is how I upload the .zip files for my 3DS themes on my site.)

Don't know how to write HTML/CSS? No problem. W3schools is an invaluable resource with free lessons on HTML, CSS, JavaScript, PHP, and a whole slew of other programming languages, both for web development and otherwise.

Want a more traditional social media experience? SpaceHey is a platform that mimics the experience of 2000s MySpace

Struggling to find independent web pages that cater to your interests via major search engines? I've got you covered. Marginalia and Wiby are search engines that specifically prioritize non-commercial content. Marginalia also has filters that let you search for more specific categories of website, like wikis, blogs, academia, forums, and vintage sites.

Maybe you wanna log off the modern internet landscape altogether and step back into the pre-social media web altogether, well, Protoweb lets you do just that. It's a proxy service for older browsers (or really just any browser that supports HTTP, but that's mostly old browsers now anyways) that lets you visit restored snapshots of vintage websites.

Protoweb has a lot of Geocities content archived, but if you're interested in that you can find even more old Geocities sites over on the Geocities Gallery

And really this is just general tip-of-the-iceberg stuff. If you dig a little deeper you can find loads more interesting stuff out there. The internet doesn't have to be a miserable place full of nothing but doomposting and targeted ads. The first step to making it less miserable is for YOU, yes YOU, to quit spending all your time on it looking at the handful of miserable websites big tech wants you to spend all your time on.

[codfiish]

hyperfixations will have you learning a whole new skill just to make the fanfic you’re writing look kinda nice

[josegremarquez]

Hojas de Estilo CSS: La Magia Detrás del Diseño Web

¿Qué son las hojas de estilo en cascada (CSS)? CSS es un lenguaje de diseño que se utiliza para dar estilo y formato a las páginas web. Separa la presentación del contenido, lo que facilita la creación de sitios web más consistentes y fáciles de mantener. Historia Breve CSS surgió a mediados de los 90 como una solución para separar el contenido (HTML) de la presentación (CSS). Desde entonces,…

[dunmertwink]

🕳